<template>
	<view class="main-box">
		<TopBar :indexflag="true" :combakflag="true" :lang="true" :bottom="true"  :barstyle="colortopic()">
		</TopBar>
		<view class="header">
			<view class="left">
				<image :src="getImgSrc(shopInfo.logo)" mode="">
				</image>
				<view class="sho-name">{{i18nLocale=='ug'?shopInfo.ug_name:shopInfo.cn_name}}</view>
			</view>
			<view class="right" @click="changemenu">
				<u-icon name="setting-fill" :color="colortopic()" size="28"></u-icon>
				<view class="name">{{$t('AdminShop')}}</view>
			</view>
		</view>
		<view class="order-box">
			<BossOrder></BossOrder>
		</view>
		<u-popup :show="popshow" mode="top" @close="close">
			<view class="mycontent-box">
				<view class="my-card">
					<view class="card-item" v-for="(item,index) in menuList" @click="changecard(item.url)">
						<u-icon :name="item.icon" :color="colortopic()" size="32"></u-icon>
						<view class="name">{{$t(item.name)}}</view>
					</view>
				</view>
			</view>
			<view class="close" @click="popshow=false">
				<u-icon name="close-circle" :color="colortopic()" size="28"></u-icon>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import BossOrder from "@/pages/boos/boosorder/index.vue"
	export default {
		components: {
			BossOrder
		},
		data() {
			return {
				current: 0,
				popshow: false,
				menuList: [{
						name: 'ManageMunu',
						icon: 'grid',
						url: '/pages/boos/menu/menu'
					},
					{
						name: 'EmployeeAdmin',
						icon: 'account',
						url: '/pages/boos/employee/employee'
					},
					{
						name: 'ManageTable',
						icon: 'coupon',
						url: '/pages/boos/table/table'
					},
					{
						name: 'Statistics',
						icon: 'rmb-circle',
						url: '/pages/boos/statistics/statistics'
					},
					{
						name: 'ChangePassword',
						icon: 'lock-fill',
						url: '/pages/boos/password'
					}
				]
			};
		},
		onLoad() {
			
		},
		computed: {
			i18nLocale() {
				return this.$i18n.locale;
			},
			shopInfo(){
				return this.$store.state.shopinfo;
			},
		},
		methods: {
			close() {
				this.popshow = false
			},
			changemenu() {
				this.popshow = true;
			},
			changecard(url) {
				if (url) {
					uni.navigateTo({
						url: url
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.main-box {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		padding: 20rpx 0rpx;

		.header {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #FFFFFF;
			box-shadow: $uni-bg-shadow;
			border-radius: $uni-border-radius-lg;
			padding: 20rpx;
			box-sizing: border-box;
			position: relative;
			z-index: 120;

			.left {
				display: flex;
				align-items: center;

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 20rpx;
				}

				.sho-name {
					padding: 0rpx 20rpx;
				}
			}

			.right {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.name {
					padding: 10rpx 0rpx;
				}
			}
		}

		.mycontent-box {
			width: 100%;
			max-height: 60vh;
			overflow: scroll;
			box-sizing: border-box;
			padding: 20rpx;
			padding-top: 150rpx;

			.my-card {
				width: 100%;
				height: 100%;
				display: flex;
				flex-wrap: wrap;
				align-content: flex-start;

				.card-item {
					background: #FFFFFF;
					box-shadow: $uni-bg-shadow;
					border-radius: $uni-border-radius-lg;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.name {
						padding: 10rpx 0rpx;
					}
				}
			}

		}

	}

	.order-box {
		width: 100%;
		height: calc(100% - 276rpx);
		padding: 20rpx 0rpx;
		box-sizing: border-box;
	}

	.close {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0rpx;
		// margin-bottom:-100rpx ;
	}

	@media (max-width:600px) {
		.my-card {
			row-gap: 50rpx;

			.card-item {
				width: 30%;
				height: 200rpx;
				margin-left: 2.5%;
			}
		}
	}

	@media (min-width:600px) {
		.my-card {
			row-gap: 50rpx;

			.card-item {
				width: 30%;
				height: 250rpx;
				margin-left: 2.5%;
			}
		}
	}

	@media (min-width:1000px) {
		.my-card {
			row-gap: 50rpx;

			.card-item {
				width: 20%;
				height: 350rpx;
				margin-left: 4%;
			}
		}
	}
</style>